<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.4.1.0.css">
    <script src="bootstrap/jquery.3.2.1.min.js"></script>
    <script src="bootstrap/popper.12.5.min.js"></script>
    <script src="bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
</head>
<body>
<div id="app" class="container">
    <form>
        <input type="file" @change="getFile($event)"><br>
        <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
    </form>
</div>
</body>
<script>
    // var formData = new FormData() // 声明一个FormData对象
    // var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'

    var abc = new Vue({
        el:"#app",
        methods:{
            getFile: function (event) {
                this.file = event.target.files[0];
                console.log(this.file);
            },
            submit: function (event) {
                //阻止元素发生默认的行为
                event.preventDefault();
                let formData = new FormData();
                formData.append("userfile", this.file);
                axios.post('../upload', formData)
                    .then(function (response) {
                        alert(response.data);
                        console.log(response);
                    })
                    .catch(function (error) {
                        alert("上传失败");
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>